<div id="modify_modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <span class="glyphicon glyphicon-pencil" style="font-size: 25px"></span>
                <h4 class="modal-title" style="display: inline-block">客户信息修改</h4>
                <span style="margin-left: 20px;" class="text-danger" id="modify_err"></span>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="modifyclientname" class="col-sm-2 control-label">客户姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="modifyclientname" placeholder="客户姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modifyclientpayname" class="col-sm-2 control-label">商品名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="modifyclientpayname" placeholder="客户购买商品">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modifyclientpaynum" class="col-sm-2 control-label">数量</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="modifyclientpaynum" placeholder="客户购买商品数量">
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer" id="modal-footer">
                <button type="button" class="btn btn-primary" id="modify_submit" >Modify it</button>
                <button type="reset"  class="btn btn-default" id="modify_reset" >Reset</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div style="margin-top: 10px;">
    <form class="form-inline">
        <div class="form-group pull-left">
            <h4 id="client_title" class="text-muted" style="padding-left: 10px;">客户信息管理</h4>
        </div>

        <div class="form-group pull-right" id="client-input-group" style="margin-right: 50px;">
            <label class="sr-only" for="findclientname">Email address</label>
            <input type="text" class="form-control" id="findclientname" placeholder="输入要查询的客户名">
                <button type="button" class="btn-sm btn-primary" id="btn-find" >查询</button>
                <button type="button" class="btn-sm btn-success" id="btn-addclient">添加</button>
        </div>
    </form>

    <div id="table" class="col-lg-12 col-md-12 col-sm-12" style="height: 750px; overflow-y: auto;">
        <table class="table table-hover table-responsive table-striped"  >
            <thead>
            <tr>
                <th>序号</th>
                <th>客户姓名</th>
                <th>客户购买商品</th>
                <th>购买的商品数量</th>
                <th class="text-center">状态</th>
            </tr>
            </thead>
            <tbody id="tbodyId">
            </tbody>
        </table>
        <div id="pageId" class="pull-right">
        </div>
    </div>
</div>
<script type="application/javascript">
    $(function() {
        $("#pageId").load("/doPageUI",function(){
            doGetObjects();
        });
        $("#client-input-group").on("click","#btn-find",doFindByclientname);
        $("#client-input-group").on("click","#btn-addclient",doAddByclient);
        $("#tbodyId").on("click","#btn-delete",doDeleteClient);
        $("#modal-footer").on("click","#modify_submit",doModifyClient);
        $("#tbodyId").on("click","#btn-modify",doModifyClient1);
    })
    // 修改
    function doModifyClient(){

      var clientid=$("#modify_modal").data("clientid");
            // console.log("1");
        //$("#modify_modal").modal("show");
        console.log(clientid);
        doModifyClientPost(clientid);
    }
    function doModifyClient1() {
        const clientname=$(this).parent().parent().children().eq(2).html();
        const clientpayname=$(this).parent().parent().children().eq(3).html();
        const clientpaynum=$(this).parent().parent().children().eq(4).html();
        const clientid=$(this).parent().parent().children().eq(0).html();
        $("#modify_modal").data("clientid",clientid);
        console.log(clientname+clientpayname+clientpaynum);
        $("#modifyclientname").val(clientname);
        $("#modifyclientpayname").val(clientpayname);
        $("#modifyclientpaynum").val(clientpaynum);
        $("#modify_modal").modal("show");
        //doModifyClientPost(clientid);
    }
    function doModifyClientPost(clientid) {
        var name=$("#modifyclientname").val();
        var payname=$("#modifyclientpayname").val();
        var paynum=$("#modifyclientpaynum").val();
        console.log(name,payname,paynum);
        const  url="/client/doUpdateClient";
        const data={
            "clientid":clientid,
            "clientname":name,
            "clientpayname":payname,
            "clientnum":paynum
        }
            if ($("#modifyclientname").val()==''){
                $("#modify_err").html("购买客户名称不能为空");
            }else if ($("#modifyclientpayname").val()==''){
               $("#modify_err").html("购买商品名称不能为空");
            }else if ($("#modifyclientpaynum").val()==''){
                $("#modify_err").html("数量不能为空");
            }else{
                $.post(url,data,function (result) {
                    //console.log(result);
                    if (result.status==0){
                        $("#gridSystemModalLabel").html("修改客户信息失败提示");
                        $("#error_content").html(result.message);
                        $("#error_modal").modal("show");
                    }else  if(result.status==1){
                        $("#modify_modal").modal("hide");
                        doGetObjects();7
                        // $("#sec_right").load("/client");
                            // $("#sec_right").load("/client",function () {
                                // doGetObjects();
                                // $("#error_modal").modal("hide");
                                // $("#modify_modal").modal("hide");
                      /*  $("#sec_right").load("/client",function () {
                                doGetObjects();
                        });*/
                    }
                })
            }
    }
    //删除
    function doDeleteClient() {
            const clientid=$(this).parent().parent().children().html();
           // console.log(clientid);
            const  url="/client/doDeleteClientById";
            const data={
                "clientid":clientid
            }
            $.get(url,data,function (result) {
                //console.log(result);
                if (result.status==0){
                    $("#gridSystemModalLabel").html("客户信息添加失败提示")
                    $("#error_content").html("抱歉:"+result.message);
                    $("#error_modal").modal("show");
                }else{
                        doGetObjects();
                }
            })
        }



    //添加
    function  doAddByclient() {
        $("#table").empty();
        $("#client-input-group").empty();
        $("#table").load("/clientadd",function () {
            let clienttitle = $("#client_title").html();
            $("#client_title").html(clienttitle+" / 添加客户信息")
        })
    }
    //查询
    function  doFindByclientname() {
        const clientname=$("#findclientname").val();
        const url="/client/doSelectClientByName";
        const data={
            "clientname":clientname
        };

        if(clientname!==''){
            $.get(url,data,function (result) {
                //console.log(result);
                doHandleFindClientnameResponseResult(result)
            })
        }else{
            alert("请输入要查询的客户名");
        }

        /*  $("#pageId").data("pageCurrent",1);
          $("#pageId").data("pageCount",1);*/

    }
    function doHandleFindClientnameResponseResult(result){
        //console.log(result.status);
        if(result.status==1){
            $("#pageId").data("pageCurrent",1);
            //console.log(result.data);
            doSetTableBodyRows(result.data);
            $("#pageId").empty();
            // doSetPagination(result.data);//page.html
        }else{
            doSetTableBodyErrors(result.message);
        }
    }

        function doGetObjects(){
            // debugger
            //1.params
            //获取在Page.html中绑定的当前页码值
            var pageCurrent=$("#pageId").data("pageCurrent");
            //假如没有值,设置初始值为1
            if(!pageCurrent)pageCurrent=1;
            //var params="pageCurrrent="+pageCurrent;
            var params={"pageCurrent":pageCurrent};
            //获取查询时用户输入的名字
           /* var name=$("#searchNameId").val();
            if(name)params.name=name;*/
            //2.url
            var url="/client/doFindClientByPage";
            //3.ajax request
            //console.log(params);
             $.getJSON(url,params,function(result){
                 //console.log(result);
                 doHandleResponseResult(result);
             });
        }
        function doHandleResponseResult(result){
            //console.log(result.status);
            if(result.status==1){
                //console.log(result.data.records);
                doSetTableBodyRows(result.data.records);
                doSetPagination(result.data);//page.html
            }else{
                doSetTableBodyErrors(result.message);
            }
        }
        function doSetTableBodyErrors(message){
            //获取body对象并清空
            var tBody=$("#tbodyId");
            tBody.empty();
            //创建tr对象
            var tr=$("<tr></tr>");
            //创建td对象
            //var len=$("table thead").find("tr").find("th").length;
            var len=$("table th").length;
            var td=$("<td></td>");
            td.prop("colspan",len);
            td.append(message);
            tr.append(td);
            //将tr追加到tbody
            tBody.append(tr);
        }
        function doSetTableBodyRows(records){
            //console.log(records);
            //获取tbody对象,并清空
            var tBody=$("#tbodyId");
            tBody.empty();
            //2.迭代数据,并追加到tBody
            for(var i in records){
                //2.1构建tr对象
                var tr=$("<tr></tr>");
                tr.data("id",records[i].id);
                //2.2构建tds对象
               // console.log("data"+tr.data("id"))
               // console.log(records[i]);
                var tds=doCreateTds(records[i],i);
               // console.log(tds);
                //2.3将tds对象追加到tr中
                tr.append(tds);
                //2.4将tr追加到tbody中
                tBody.append(tr);
            }
        }
        function doCreateTds(row,i){
            var tds=
                `<td style="display: none">${row.clientid}</td>
                <td>${(parseInt(i)+1)}</td>
               <td>${row.clientname}</td>
               <td>${row.clientpayname}</td>
               <td>${row.clientnum}</td>
               <td class="text-center">
               <button type="button" id=btn-modify class="btn-success btn-sm">修改</button>
               <button type="button" id=btn-delete  class="btn-danger btn-sm">删除</button>
               </td>`;
            return tds;
        }

</script>